<script setup>
import  { tool }  from "../../tool/index"
import { ref, onMounted } from "vue"
import { useRouter } from "vue-router"
const router = useRouter()
const imageUrl = tool.serverPath + "api/app_api/image/download?fileName="

var carousels = ref([])
async function getCarousel() {
    try {

        const data = {
                key: "Search",
                data: {
                    key: [""],
                    value: [""]
                }
            }
        const carousel = await tool.axiosApi("carousel", data, "get")
        for (let index = 0; index < carousel.data.length; index++) {
            const date = {
                    key: "Search",
                    data: {
                        key: ["id"],
                        value: [carousel.data[index].blog_id]
                    }
                }
            const blog = await tool.axiosApi("article", date, "get")
            carousels.value[index] = {
                // 轮播图数据选择性展示
                image: carousel.data[index].image || blog.data[0].image,
                title: carousel.data[index].title || blog.data[0].title,
                content: carousel.data[index].description || blog.data[0].content,
                blog: carousel.data[index].blog_id
            }
        }
    } catch (error) {

    }
}
const carousel = ref()
const pageCount = ref(0)
function ChangeIndex(value) {
    pageCount.value = value
    carousel.value.setActiveItem(value)

}
function GotoPage() {
    router.push({ name: 'BlogContent', params: { BlogId: carousels.value[pageCount.value].blog } })
}
onMounted(async () => {
    try {
        await getCarousel()

    } catch (error) {

    }
})
</script>

<template>
    <el-row class="carousel">
        <el-col :span="8">
            <el-carousel @click="GotoPage()" class="carousel_content" pause-on-hover="true" ref="carousel" :autoplay="false"
                arrow="never">
                <el-carousel-item :name="index" v-for="(item, index) in carousels" :key="index">
                    <div class="content_box">
                        <div>
                            <el-text class="title" truncated>
                                {{ item.title }}
                            </el-text>
                        </div>
                        <div class="content">
                            <el-text>
                                {{ item.content }}
                            </el-text>
                        </div>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </el-col>
        <el-col :span="24">
            <el-carousel @click="GotoPage()" interval="5000" pause-on-hover="true" height="350px" class="carousel_image"
                @change="ChangeIndex" autoplay="false" arrow="hover">
                <el-carousel-item :name="index" v-for="(item, index) in carousels" :key="index">
                    <el-image class="image" :src="imageUrl + item.image" fit="cover " />
                </el-carousel-item>
            </el-carousel>
        </el-col>
    </el-row>
</template>

<style scoped>
.carousel {
    background-color: white;
    height: 430px;
    display: flex;
    align-items: center;
}

.carousel .el-col {
    position: static;
}

.carousel_content {
    font-family: '微软雅黑', Arial, sans-serif;
    overflow: hidden;
    z-index: 1;
    position: absolute;
    left: 100px;
    top: 65px;
    margin: auto;
    ;
    width: 30%;
}

.content_box {
    padding: 15px;
    border-radius: 10px;
    margin: 15px;
    background-color: rgb(255, 255, 255);
    height: 80%;
    overflow: hidden;
}

.carousel_content .title {
    color: black;
    font-size: 25px;
    font-weight: 1000;
    box-sizing: border-box;
}

.carousel_content .content {
    height: 190px;
    width: 100%;
    overflow: hidden;
    padding-top: 5px;
    font-weight: 1000;
}

.carousel_image {
    border-radius: 15px;
    position: absolute;
    right: 40px;
    top: 40px;
    z-index: 0;
    width: 70%;
    overflow: hidden;
}

.carousel_image .image {
    width: 100%;
    height: 100%;
}
</style>